<template>
  <base-layout>
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row class="">
          <span style="font-weight: bold">工位信息</span>
          <el-divider></el-divider>
          <!-- <el-col :span="12"></el-col> -->
        </el-row>
        <el-row>
          <el-form-item label="工位名称:" prop="stationName">
            <el-input clearable v-model="fromdata.stationName" />
          </el-form-item>
          <el-form-item label="所属门店:" prop="storeId">
            <Job-shop clearable v-model="fromdata.storeId" placeholder="所属门店" />
          </el-form-item>
          <el-form-item label="工位类型:" prop="stationTypeDictId">
            <el-select clearable v-model="fromdata.stationTypeDictId">
              <el-option
                v-for="item in dict['工位类型']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="状态:">
            <el-switch
              v-model="fromdata.status"
              style="width: 203px"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>

          <el-form-item label="备注:">
            <el-input
              type="textarea"
              rows="3"
              clearable
              style="width: 503px"
              v-model="fromdata.remark"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="fromdata"
        :rules="rules"
        label-width="73px"
        label-position="right"
      >
        <span style="font-weight: bold">工位照片</span>
        <el-divider></el-divider>
        <el-row>
          <el-form-item>
            <el-upload
              action=""
              list-type="picture-card"
              :http-request="httpRequest"
              :fileList="fileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="imageDialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
        </el-row>
        <el-col :span="24" align="right">
          <el-button type="primary" style="width: 100px" @click="onSubmit">保存</el-button>
        </el-col>
      </el-form>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import { getDict, fileUpload, getImageUrl } from '@/utils'
import { add, updateData, details } from '@/api/after-sale/personnel/workstation'
export default {
  mixins: [baseMixin({})],
  data() {
    return {
      fileList: [],
      fromdata: {
        stationName: '',
        storeId: '',
        stationTypeDictId: '',
        status: true,
        remark: '',
        photos: []
      },
      rules: {
        stationName: [
          { required: true, message: '请输入工位名称', trigger: 'blur' },
        ],
      },
      dialogImageUrl: '',
      imageDialogVisible: false,
      dict: []
    }
  },
  async created() {
    const id = this.$route.query && this.$route.query.id;
    if (id){
      const { data } = await details(id);
      console.log('查看详情',data)
      if (data){
        this.fromdata = data;
        this.fromdata.photos=data.photos?data.photos.split(','):[];
        this.fromdata.photos.forEach((item,index)=>{
          this.fileList.push({
              name: index,
              url: getImageUrl(item),
            })
        })

      }
    }
  },
  mounted() {
    this.dict = getDict(['工位类型'])
  },
  methods: {
    //覆盖文件默认上传行为
    httpRequest(value) {
      fileUpload(value.file).then((res) => {
        let { success, data } = res
        if (success) this.fromdata.photos.push(data.id)
      })
    },
    async onSubmit() {
      this.$refs.fromdata.validate(async valid => {
        if (valid) {
          if(this.fromdata.photos){
            this.fromdata.photos = this.fromdata.photos.join()
          }
          const { success } = this.fromdata.id ? await updateData(this.fromdata) : await add(this.fromdata)
          if (success) {
            this.$message.success('操作成功')
            this.closeRouter()
          }
        }
      })
    }
  },
  handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url
    this.dialogVisible = true
  },
}
</script>
